alert('SceneLogin.js loaded');

var index = undefined; 

function SceneLogin() {

};

SceneLogin.prototype.initialize = function () {
	alert("SceneLogin.initialize()");
	// this function will be called only once when the scene manager show this scene first time
	// initialize the scene controls and styles, and initialize your variables here
	// scene HTML and CSS will be loaded before this function is called
	$('#FacebookButton').sfButton({
		text:'Facebook'
	});

	$('#ConnectButton').sfButton({
		text:'Already have an account'
	});

	$('#EmailSignup').sfButton({
		text:'Signup with an email'
	});

	$('#FrenchButton2').sfButton({
		text:'French'
	});
	$('#EnglishButton2').sfButton({
		text:'English'
	});
	

	

};

SceneLogin.prototype.handleShow = function (data) {
	alert("SceneLogin.handleShow()");
	// this function will be called when the scene manager show this scene
	var index = $('#category').sfList('getIndex');
	alert("INDEXXXXXXXXX "+ index +" - ");

};

SceneLogin.prototype.handleHide = function () {
	alert("SceneLogin.handleHide()");
	// this function will be called when the scene manager hide this scene
};

SceneLogin.prototype.handleFocus = function () {
	alert("SceneLogin.handleFocus()");
	// this function will be called when the scene manager focus this scene
};

SceneLogin.prototype.handleBlur = function () {
	alert("SceneLogin.handleBlur()");
	// this function will be called when the scene manager move focus to another scene from this scene
};

SceneLogin.prototype.handleKeyDown = function (keyCode) {
	alert("SceneLogin.handleKeyDown(" + keyCode + ")");
	// TODO : write an key event handler when this scene get focued

	switch (keyCode) {
		case sf.key.LEFT:
			break;
		case sf.key.RIGHT:
			break;
		case sf.key.UP:
			
			switch (index) {
			case undefined:
				index = 3;
				$("#SceneLogin div").removeClass("css3button");
				$("#FacebookButton").addClass("css3button");

				break;
			case 1:
				index = 3;
				$("#SceneLogin div").removeClass("css3button");
				$("#FacebookButton").addClass("css3button");

				break;
			case 2:
				index = 1;
				$("#SceneLogin div").removeClass("css3button");
				$("#EmailSignup").addClass("css3button");

				break;
			case 3:
				index = 2;
				alert("INDEX 3 "+ index +" - ");
				$("#SceneLogin div").removeClass("css3button");
				$("#ConnectButton").addClass("css3button");
				

				break;
			default:
				alert("INDEX DEFAULT  "+ index +" - ");
				break;
			}
		/*	index = $('#category').sfList('getIndex');
			sf.scene.hide(this.data[index]);
			$('#category').sfList('prev');
			index = $('#category').sfList('getIndex');
			sf.scene.show(this.data[index]);
			document.getElementById("MainListPage").innerHTML = (Math.floor(index/this.itemPerPage)+1) + "/" + Math.ceil(this.data.length/this.itemPerPage); */
			break;
		case sf.key.DOWN:
			
			
			switch (index) {
			case undefined:
				index = 1;

				$("#SceneLogin div").removeClass("css3button");
				$("#FacebookButton").addClass("css3button");

				break;
			case 1:
				index = 2;
				$("#SceneLogin div").removeClass("css3button");
				$("#EmailSignup").addClass("css3button");

				break;
			case 2:
				index = 3;
				$("#SceneLogin div").removeClass("css3button");
				$("#ConnectButton").addClass("css3button");

				break;
			case 3:
				index = 1;
				$("#SceneLogin div").removeClass("css3button");
				$("#FacebookButton").addClass("css3button");

				break;
			default:
				alert("INDEX DEFAULT  "+ index +" - ");
				break;
			}
			
		/*	index = $('#category').sfList('getIndex');
			sf.scene.hide(this.data[index]);
			$('#category').sfList('next');
			index = $('#category').sfList('getIndex');
			sf.scene.show(this.data[index]);
			document.getElementById("MainListPage").innerHTML = (Math.floor(index/this.itemPerPage)+1) + "/" + Math.ceil(this.data.length/this.itemPerPage);
		*/	break;
		case sf.key.ENTER:
			sf.scene.hide('Login');
			sf.scene.show('Menu');
			sf.scene.focus('Menu');
			break;
		default:
			alert("handle default key event, key code(" + keyCode + ")");
			break;
	}
};